<template>
  <div class="about">
    <div class="header_con">
    <div class="header">
      <h1>手机品牌管理</h1>
      <input type="text" placeholder="请输入搜索条件" v-model.trim="keywords" @keyup.enter="findPhoeList">
    </div>
  </div>
  
  <div class="tb_title">
    <h3>品牌列表</h3>
    <a href="javascript:;" @click="Dvisable=true">新增品牌</a>
  </div>
  <!--新增品牌弹出框-->
  <el-dialog v-model="Dvisable" title="新增品牌">
    <el-form>
      <el-form-item label="添加品牌" >
        <el-input v-model="addphone" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="Dvisable=false">取消</el-button>
        <el-button type="primary" @click="Toadd">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-table :data="showPhoneList" style="width: 96%;margin: 10px auto;">
    <el-table-column label="编号" width="180" height="50px">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.$index }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="品牌名称" width="300" height="50px">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="创立时间" width="380" height="50px">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ getTime(scope.row.time) }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" height="50px">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index)">
        删除</el-button>
    </template>
    </el-table-column>
  </el-table>
  </div>
  
</template>
<script lang="ts" setup>
import { reactive, ref } from "@vue/reactivity";
import { computed, nextTick, onMounted } from "@vue/runtime-core";
import moment from 'moment'
let addphone = ref("")
let keywords = ref("");
let Dvisable = ref(false);
//声明一个泛型接口
interface phonetype {
    name?:string;
    time?:number;
}
const data = reactive({
    phoneList:[
        {name:'小米',time:Date.now()},
        {name:'红米',time:Date.now()},
        {name:'华为',time:Date.now()},
        {name:'OPPO',time:Date.now()},
        {name:'VIVO',time:Date.now()},
    ],
});
//格式化时间
const getTime =(time:number)=>{
    return moment(time).format("YYYY-MM-DD HH:mm")
}
const showPhoneList = ref()
//备份数据
showPhoneList.value = data.phoneList;
//添加商品
const Toadd = ()=>{
    if(addphone.value===""){
        alert("添加不能为空！");
        return;
    }
    data.phoneList.push({name:addphone.value,time:Date.now()})
    //关闭弹窗
    Dvisable.value = false;
    //清空输入
    addphone.value = ''
}
const handleDelete = (index:number)=>{
    console.log(index);
    data.phoneList = data.phoneList.filter((item)=>{
        return item.name != showPhoneList.value[index].name
    });
    showPhoneList.value=data.phoneList
    findPhoeList();
    
    

    
}
//根据搜索条件查询
const findPhoeList=()=>{
    showPhoneList.value=data.phoneList.filter((item)=>{
        return item.name.indexOf(keywords.value)>-1
    });
    
    console.log(data.phoneList);
    console.log(showPhoneList.value);
    
    
}
//过滤时间
// const fulltime = computed((index)=>{
//     let str = '';
//     let year = data.phoneList[index].time/1000/3600/24/365;
//     let month= data.phoneList[index].time/1000/3600/
// })
</script>
<style scoped>
.about {
    margin: 10px auto;
    width: 1000px;
    height: 600px;
    background-image: linear-gradient(to right,rgb(124, 16, 212),rgb(164, 12, 202),rgb(172, 23, 159),rgb(196, 24, 104));
}
.header {
      width: 960px;
      margin: 0px auto;
      overflow: hidden;
    }

    .header h1 {
      margin: 0px;
      padding: 0px;
      font-size: 22px;
      line-height: 60px;
      font-weight: normal;
      color: #f1f1f1;
      letter-spacing: 1px;
      float: left;
    }

    .header input {
      float: right;
      width: 240px;
      height: 30px;
      text-indent: 10px;
      border-radius: 4px;
      margin-top: 15px;
      border: 0px;
      outline: none;
    }
    .tb_title {
      width: 960px;
      height: 40px;
      margin: 20px auto 0;
      background-color: #3366cc;
      overflow: hidden;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .tb_title h3 {
      margin: 0px;
      padding: 0px;
      line-height: 40px;
      font-size: 16px;
      font-weight: normal;
      text-indent: 15px;
      float: left;
      color: #fff;
    }

    .tb_title a {
      float: right;
      text-decoration: none;
      background-color: #f3cd57;
      color: #2c2203;
      padding: 5px 10px;
      font-size: 12px;
      border-radius: 4px;
      margin: 7px 15px 0 0;
    }

    .tb_title a:hover {
      border: 1px solid rgba(255, 255, 255, 0.6);
      background-color: transparent;
      color: #fff;
    }

    .tb {
      border-collapse: collapse;
      width: 960px;
      margin: 0 auto;
    }
</style>

